<template>
  <div>
    <div class="crumbs">
      <router-link to="/goods/ysgoods?status=1">
        <el-button :type="chooseButton('1')">审核通过商品</el-button>
      </router-link>
      <router-link to="/goods/ysgoods?status=0">
        <el-button :type="chooseButton('0')">待审核商品</el-button>
      </router-link>
      <router-link to="/goods/ysgoods?status=2">
        <el-button :type="chooseButton('2')">审核失败商品</el-button>
      </router-link>
    </div>
    <div class="crumbs">
      <el-form ref="form" :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item label="商品标题">
          <el-input v-model="formInline.title" placeholder="商品标题"></el-input>
        </el-form-item>
        <el-form-item label="商品分类">
          <el-cascader clearable change-on-select v-model="formInline.cateIds" :options="tree" :props="defaultProps" :show-all-levels="false"></el-cascader>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSearch('form')">查询</el-button>
        </el-form-item>
      </el-form>
    </div>
    <el-table :data="tableData" border style="width: 100%">
      <el-table-column prop="id" label="ID" width="100"></el-table-column>
      <el-table-column prop="user_info.name" label="用户名" width="150"></el-table-column>
      <el-table-column prop="user_info.nickname" label="昵称" width="150"></el-table-column>
      <el-table-column prop="cate_name" label="商品分类" width="150"></el-table-column>
      <el-table-column prop="title" label="商品标题" width="400"></el-table-column>
      <el-table-column prop="create_time" label="创建时间" :formatter="timeFormat"></el-table-column>
      <el-table-column prop="status" label="状态" :formatter="statusFormat" width="120"></el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button size="small" @click="see(scope.$index, scope.row)">查看详情</el-button>
          <el-button size="small" v-if="scope.row.status === 1" @click="off(scope.$index, scope.row)">下架商品</el-button>
          <el-button size="small" v-if="scope.row.status === 1" @click="recommend(scope.$index, scope.row)">商品推荐</el-button>
          <el-button size="small" v-if="scope.row.status === 0" @click="pass(scope.$index, scope.row)">审核通过</el-button>
          <el-button size="small" v-if="scope.row.status === 0" @click="failed(scope.$index, scope.row)">审核失败</el-button>
          <el-button size="small" @click="del(scope.$index, scope.row)">删除商品</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination">
      <el-pagination
        @current-change ="handleCurrentChange"
        layout="total, prev, pager, next"
        :current-page="textData.current_page"
        :page-size="textData.per_page"
        :total="textData.total">
      </el-pagination>
    </div>
  </div>
</template>

<script>
  import { mapState } from 'vuex'
  import notify from '@/tools/notify'

  export default {
    data () {
      return {
        defaultProps: {
          value: 'id',
          label: 'name',
          children: '_child'
        },
        formInline: {
          title: '',
          cateIds: []
        },
        cateId: 0
      }
    },
    computed: {
      ...mapState({
        tableData: state => state.goods.goodsList,
        textData: state => state.goods.pageData,
        tree: state => state.goodsclass.goodsTree
      }),
      status () {
        // 默认为审核通过
        if (this.$route.query.status === undefined) {
          return 1
        }
        return this.$route.query.status
      }
    },
    created () {
      this.goodsList()
      this.goodsClassTree()
    },
    watch: {
      status: function () {
        this.goodsList()
      }
    },
    methods: {
      // 获取商品分类树
      async goodsClassTree () {
        let payload = {
          id: 14
        }
        await this.$store.dispatch('goodsclass/goodsClassTree', payload)
      },
      // 获取商品列表
      async goodsList () {
        let payload = {
          is_sell: 0,
          status: this.status,
          cate_id: this.$route.query.cateId,
          keywords: this.$route.query.title,
          page: this.textData.current_page,
          listRows: this.textData.per_page
        }
        await this.$store.dispatch('goods/goodsList', payload)
      },
      // 按钮选中时的状态
      chooseButton (val) {
        return val === this.status ? 'success' : ''
      },
      onSearch (formName) {
        const self = this
        self.$refs[formName].validate((valid) => {
          if (valid) {
            if (Number(self.formInline.cateIds.length) > 0) {
              self.cateId = self.formInline.cateIds[Number(self.formInline.cateIds.length) - 1]
            } else {
              self.cateId = 0
            }
            self.$router.push({path: '/goods/ysgoods', query: {title: self.formInline.title, cateId: self.cateId, status: this.status}})
            self.goodsList()
          }
        })
      },
      handleCurrentChange (val) {
        this.textData.current_page = val
        this.goodsList()
      },
      see (index, row) {
        this.$router.push({name: 'ysGoodsInfo', params: {id: row.id}})
      },
      recommend (index, row) {
        this.$store.commit('goods/GOODS_SAVE_DATA', row)
        this.$router.push('/goods/recommendcollection')
      },
      off (index, row) {
        let payload = {
          id: row.id
        }
        this.$store.dispatch('goods/goodsOff', payload).then(res => {
          this.goodsList()
          notify.success(res.msg)
        })
      },
      del (index, row) {
        let payload = {
          id: row.id
        }
        this.$store.dispatch('goods/goodsDel', payload).then(res => {
          this.goodsList()
          notify.success(res.msg)
        })
      },
      pass (index, row) {
        let payload = {
          id: row.id,
          status: 1
        }
        this.$store.dispatch('goods/goodsStatus', payload).then(res => {
          this.goodsList()
          notify.success(res.msg)
        })
      },
      failed (index, row) {
        let payload = {
          id: row.id,
          status: 2
        }
        this.$store.dispatch('goods/goodsStatus', payload).then(res => {
          this.goodsList()
          notify.success(res.msg)
        })
      },
      timeFormat: function (value) {
        let mydate = new Date()
        mydate.setTime(value.create_time * 1000)
        let result = mydate.getFullYear() + '-' + (mydate.getMonth() + 1) + '-' + mydate.getDate() + ' ' + mydate.getHours() + ':' + mydate.getMinutes() + ':' + mydate.getSeconds()
        return result
      },
      statusFormat (value) {
        if (value.status === 1) {
          return '已通过'
        } else if (value.status === 0) {
          return '未审核'
        } else if (value.status === 2) {
          return '审核失败'
        }
      }
    }
  }
</script>

<style scoped>
  .crumbs {
    display: inline-block;
    vertical-align: top;
    margin-right: 50px;
  }
  .el-button, .el-button+.el-button {
    margin: 0 5px 5px 0;
  }
</style>
